<template>
  <div class="listProgress">
    <div class="dispose">
      <div class="title"></div>
      <div class="rightDispose">
        <div :class="activeIndex === 1 ? ' item active' : ' item '" @click="selectIndex(1)">24小时排名</div>
        <div :class="activeIndex === 7 ? ' item active' : ' item'" @click="selectIndex(7)">周排名</div>
      </div>
    </div>
    <div v-for="(item, index) in list" :key="index" class="listItem">
      <div class="text">
        <div class="leftText">
          <span>NO {{ index + 1 }}</span> {{ item.name }}
        </div>
        <div class="rightText">
          {{ activeIndex === 1 ? item.value : item.month }}/{{ activeIndex === 1 ? '天' : '周' }}
        </div>
      </div>
      <el-progress
        :percentage="parseInt((activeIndex === 1 ? item.value / 365 : item.month / 1200) * 100)"
        :show-text="false"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        { name: '水龟虫', value: 279, month: 913 },
        { name: '龙虱', value: 60, month: 160 },
        { name: '蝼蛄', value: 44, month: 120 },
        { name: '腹子春', value: 43, month: 77 },
        { name: '铜绿丽金龟', value: 27, month: 48 }
      ]
    }
  },
  data() {
    return { activeIndex: 1 }
  },
  methods: {
    selectIndex(index) {
      this.activeIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
.listProgress {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}
.dispose {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dispose .title {
  width: 10px;
  height: 10px;
}
.dispose .rightDispose {
  display: flex;
  align-items: center;
}
.rightDispose .item {
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
  margin-right: 20px;
  cursor: pointer;
}
.rightDispose .active {
  font-size: 16px;
  opacity: 1;
}
.listItem {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.listItem .text {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 16px;
}
.listItem .rightText {
  font-size: 14px;
  letter-spacing: 1px;
}
</style>
